{% extends "base_lang.html" %}

{% block title %}Terms of Service - Sprunki Phase 3{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="pt-20 pb-12 md:pt-32 md:pb-20 bg-gradient-to-r from-primary to-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">{{ _('Terms of Service') }}</h1>
            <p class="text-xl text-white mb-8">{{ _('Guidelines for Using Sprunki Phase 3') }}</p>
        </div>
    </div>
</section>

<!-- Content Section -->
<section class="py-16 bg-white dark:bg-gray-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="space-y-8">
            <section>
                <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('1. Acceptance of Terms') }}</h2>
                <p class="text-gray-600 dark:text-gray-300">
                    {{ _('By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement.') }}
                </p>
            </section>

            <section>
                <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('2. Use License') }}</h2>
                <p class="text-gray-600 dark:text-gray-300">
                    {{ _('Permission is granted to temporarily download one copy of the materials for personal, non-commercial transitory viewing only.') }}
                </p>
            </section>

            <section>
                <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('3. User Account') }}</h2>
                <ul class="list-disc pl-6 space-y-2 text-gray-600 dark:text-gray-300">
                    <li>{{ _('You are responsible for maintaining the confidentiality of your account') }}</li>
                    <li>{{ _('You agree to accept responsibility for all activities that occur under your account') }}</li>
                    <li>{{ _('You must not share your account credentials with any third party') }}</li>
                </ul>
            </section>
        </div>
    </div>
</section>
{% endblock %}
